|
阅读：5090回复：2
在react中实现一个简单双向数据绑定
vue中的双向数据绑定非常的方便，那么如何在react中实现一个简单的双向数据绑定呢？
首先我们在input中添加一个onChange事件，然后把这个输入框的value绑定到state中 <Input placeholder="商品名" onChange={this.ProductName.bind(this)} value={this.state.inpValu}/>constructor(props) {
super(props)
this.state = {
inpValu:""
}
}这个onChange事件会在这个input的值改变后触发，同时返回值，其中这个值的target下的value就是这个input当前的值，这样的话我们就只需要将这个值设置到state里input的value绑定的值就好了。ProductName(e){
this.setState({
inpValu:e.target.value
})
}这样的话就可以实现input的value的值改变，state中的值也会改变。state的值改变，input的value值也改变这样一个简单的双向数据绑定。值得注意的是通过setState来修改state的值的话，它是异步的。想要设置完后就获取里面的值需要在它第二个参数中传递一个回调函数，在这个回调中可以获取修改完的值 chongZhi (){
this.setState({ProductName:""},function () {
console.log(this.state.ProductName);
})
} |
|
最新喜欢： Yoon_m...
|
|
沙发#
发布于：2020-07-15 09:19
15283063588：chongZhi这个方法在哪调用？回到原帖这个方法是自定义的，这里我只是展示了一个输入了内容后，清除输入框里面的内容的方法，要调用的话可以给一个名叫重置按钮的点击事件调用，在输入框的内容上传后也可以调用 |
|
|
板凳#
发布于：2020-07-13 10:37
chongZhi这个方法在哪调用？
|
|
